<script setup lang="ts">
import { PropType } from 'vue'
// import { navigateToUrl } from 'single-spa'
import { ChatInterface } from 'stores/store'
// import { /* useRoute, */ useRouter } from 'vue-router'
import { i18n } from 'boot/i18n'
import { Notify, useDialogPluginComponent } from 'quasar'
import api from 'src/api'
import useExceptionNotifier from 'src/composables/useExceptionNotifier'

const props = defineProps({
  chat: {
    type: Object as PropType<ChatInterface>,
    required: true
  },
  callback: {
    type: Function,
    required: false
  }
})
// const emits = defineEmits(['change', 'delete'])
defineEmits([...useDialogPluginComponent.emits])

const { tc } = i18n.global
// const store = useStore()
// const route = useRoute()
// const router = useRouter()

const exceptionNotifier = useExceptionNotifier()

const {
  dialogRef,
  onDialogHide,
  // onDialogOK,
  onDialogCancel
} = useDialogPluginComponent()

// 确定时
const onOKClick = async () => {
  // notify
  const dismiss = Notify.create({
    classes: 'notification-positive shadow-15',
    // icon: 'mdi-check-circle',
    spinner: true,
    textColor: 'positive',
    message: `${tc('正在删除对话')}`,
    position: 'bottom',
    closeBtn: true,
    timeout: 0, // infinite
    multiLine: false
  })

  try {
    await api.chat.v0.deleteChatSession({
      path: {
        id: props.chat?.id
      }
    })

    // notify
    dismiss()
    Notify.create({
      classes: 'notification-positive shadow-15',
      icon: 'mdi-check-circle',
      // spinner: true,
      textColor: 'positive',
      message: `${tc('成功删除对话')}`,
      position: 'bottom',
      closeBtn: true,
      timeout: 5000,
      multiLine: false
    })

    // close
    onDialogHide()

    // callback
    if (props.callback) {
      props.callback()
    }
  } catch (exception) {
    dismiss()
    exceptionNotifier(exception, 'DeleteChatDialog')
  }
}
</script>

<template>
  <!-- notice dialogRef here -->
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin dialog-negative ">

      <q-card-section class="row items-center justify-center q-pb-md">
        <div class="text-negative">{{ tc('删除对话') }}</div>
        <q-space/>
        <q-btn icon="close" flat dense size="sm" v-close-popup/>
      </q-card-section>

      <q-separator/>

      <q-card-section>

        <div class="row items-center">
          <div class="col-3 text-grey-7">
            {{ tc('对话名称') }}
          </div>

          <div class="col q-pa-sm">
            {{ chat.name }}
          </div>
        </div>

      </q-card-section>

      <q-separator/>

      <q-card-actions align="between">

        <q-btn class="q-ma-sm"
               color="primary"
               outline
               no-caps
               :label="tc('取消')"
               @click="onDialogCancel"/>

        <q-btn class="q-ma-sm"
               color="negative"
               unelevated
               no-caps
               :label="tc('删除')"
               @click="onOKClick"/>

      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
